<script setup>
import { ref, onMounted, watch } from 'vue'
import { Chart } from '@antv/g2'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const productList = ref([
  {
    icon: 'src/static/icon/hot/money.png',
    title: t('finance_money'),
    desc: t('finance_moneyDesc')
  },
  {
    icon: 'src/static/icon/hot/date.png',
    title: t('finance_pursuit'),
    desc: t('finance_pursuitDesc')
  },
  {
    icon: 'src/static/icon/hot/turn.png',
    title: t('finance_alipay'),
    desc: t('finance_alipayDesc')
  }
])
let chart = null


const initChart = () => {
  chart = new Chart({
    container: 'g2',
    height: 140,
    width: 140,
    interaction: {
      tooltip: false,
      brushHighlight: false
    }
  })

  const data = [
    { name: 'Sports', value: 70 },
    { name: 'Strategy', value: 10 }
  ]

  chart.coordinate({ type: 'theta', innerRadius: 0.9 })

  chart
    .interval()
    .transform({ type: 'stackY' })
    .data(data)
    .encode('y', 'value')
    .encode('color', 'name')
    // .style('stroke', 'white')
    .style('inset', 3)
    .style('radius', 10)
    .style('lineDash', [0, 0])
    .scale('color', {
      range: ['#0167FF', '#43D1C8']
      // palette: 'spectral',
      // offset: (t) => t * 0.8 + 0.1
    })
    .animate('enter', { type: 'waveIn' })
    .legend(false)
  chart
    .text()
    .style('text', '25kU')
    .style('x', '50%')
    .style('y', '50%')
    .style('fill', '#fff')
    .style('fontSize', 26)
    .style('fontWeight', 'bold')
    .style('textAlign', 'center')

  chart
    .text()
    .style('text', t('finance_totalAmount'))
    // Absolute position
    .style('x', '50%')
    .style('y', '70%')
    .style('fill', '#D9D9D9')
    .style('fontSize', 12)
    // .style('fontWeight', 'bold')
    .style('textAlign', 'center')

  // chart.interactions(false)

  chart.render()
}
onMounted(() => {
  initChart()
})
watch(
  () => t('home'),
  () => {
    productList.value = [
      {
        icon: 'src/static/icon/hot/money.png',
        title: t('finance_money'),
        desc: t('finance_moneyDesc')
      },
      {
        icon: 'src/static/icon/hot/date.png',
        title: t('finance_pursuit'),
        desc: t('finance_pursuitDesc')
      },
      {
        icon: 'src/static/icon/hot/turn.png',
        title: t('finance_alipay'),
        desc: t('finance_alipayDesc')
      }
    ]
    initChart()
  }
)
</script>
<template>
  <div class="container">
    <div class="body w-100% flex flex-col gap-15">
      <div class="p-15 rounded-[15px] bg-[#fff]/10">
        <div class="text-[#fff] text-[18px] font-pingfang mb-16">{{ t('project_productInfo') }}</div>
        <div class="flex flex-col gap-12">
          <div class="flex w-100% items-center justify-between font-roboto text-[12px]">
            <div class="w-150 text-[#D9D9D9]">{{ t('project_name') }}</div>
            <div class="text-[#fff]">B</div>
          </div>
          <div class="flex w-100% items-center justify-between font-roboto text-[12px]">
            <div class="w-150 text-[#D9D9D9]">{{ t('project_interest') }}</div>
            <div class="text-[#fff]">0%</div>
          </div>
          <div class="flex w-100% items-center justify-between font-roboto text-[12px]">
            <div class="w-150 text-[#D9D9D9]">{{ t('project_annual') }}</div>
            <div class="text-[#fff]">12-24%</div>
          </div>
        </div>
      </div>
      <div class="p-15 rounded-[15px] bg-[#fff]/10">
        <div class="text-[#fff] text-[18px] font-pingfang mb-16">{{ t('project_totalLoan') }}</div>
        <div class="flex items-center h-140">
          <div id="g2" class="w-140 h-140"></div>
          <div class="flex flex-col gap-18 font-roboto">
            <div class="flex items-center">
              <div class="w-6 h-6 rounded-full bg-[#0167FF]"></div>
              <div class="text-[14px] ml-8">
                <span class="text-[#fff]">{{ t('finance_totalAmount') }}</span>
                <span class="text-[#D9D9D9]">≈18,222.00</span>
              </div>
            </div>
            <div class="flex items-center">
              <div class="w-6 h-6 rounded-full bg-[#43D1C8]"></div>
              <div class="text-[14px] ml-8 flex items-center">
                <span class="text-[#fff]">{{ t('project_borrowed') }}</span>
                <span class="text-[#D9D9D9]">≈18,22222.00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="p-15 rounded-[15px] bg-[#fff]/10">
        <div class="text-[#fff] text-[18px] font-pingfang mb-6">{{ t('project_about') }}</div>
        <div class="text-[#D9D9D9] text-[13px] font-pingfang">
          胎盤幹細胞是一種來源於胎盤組織的幹細胞，具有多能性和自我更新能力。它們可以分化為多種細胞類型，如神經細胞、心肌細胞和血液細胞，被廣泛應用於再生醫學領域，用於治療多種疾病和損傷，如心臟病、腦損傷和骨折。由於其來源於胎盤組織，不具有倫理爭議，且具有很高的安全性和潛在的臨床應用前景。
        </div>
      </div>
      <div class="p-15 rounded-[15px] bg-[#fff]/10">
        <div class="text-[#fff] text-[18px] font-pingfang mb-22">{{ t('finance_highlights') }}</div>
        <div class="flex flex-col gap-32">
          <div class="flex" v-for="(item, index) in productList" :key="index">
            <van-image radius="8" width="40" height="40" lazy-load :src="item.icon" />
            <div class="ml-19">
              <div class="text-[#fff] text-[16px] font-pingfang mb-10">{{ item.title }}</div>
              <div class="text-[#A2B0C3] text-[12px] font-microsoft">{{ item.desc }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;

  .body {
    padding: 20px 15px;
    min-height: calc(100vh - var(--van-nav-bar-height));
    background: url('@/static/imgs/lending/bg.png') no-repeat;
    background-size: 100% 100%;
    // padding: 20px 15px;
  }
}

.item {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.05);
}

.tag {
  padding: 3px 4px;
  border-radius: 2px;
  background: var(--1, linear-gradient(90deg, #1675fd 0%, #2fc4ff 100.27%));
}
</style>
